<template>
	<vie class="detail">
		<view class="person" @click="gotoUserInfo">
			<view class="img"><img :src="ownerInfo.avatar"></view>
			<view class="text">
				<view style="font-size:20px;font-weight:600;">{{ownerInfo.nickName}}</view>
				<view style="font-size:14px;font-weight:520;">{{ownerInfo.sex==0?"男":"女"}}</view>
				<view style="font-size:14px;font-weight:520;">学号：{{ownerInfo.studentId}}</view>
			</view>
			<view class="icon"></view>
		</view>
		<view class="top">
			<view class="main">
				<view style="margin-bottom: 2px;display:flex;">
					<view style="margin-top:-2px;"> <img src="../../static/时间.png" style="width:20px;height:20px;">
					</view>{{detailData.time}}
				</view>
				<view style="display:flex;">
					<view style="margin-left:-2px;"><img src="../../static/位置.png" style="width:23px;height:23px;">
					</view>
					{{detailData.place}}
				</view>
				<view style="margin-top: -3px;display:flex;">
					<view><img src="../../static/性别.png" style="width:20px;height:20px;"></view>{{detailData.sex}}
				</view>
				<view style="margin-top: -3px;display:flex;">
					<view><img src="../../static/性别.png" style="width:20px;height:20px;"></view>{{detailData.more}}
				</view>
				<view style="margin-top: -3px;display:flex;">
					<view><img src="../../static/关注.png" style="width:20px;height:20px;"></view>
					{{detailData.joinNumber}}/{{detailData.number}}&nbsp;人已参与
				</view>
			</view>

		</view>

		<view class="main">
			<view class="center">
				<view class="uni-padding-wrap uni-common-mt">
					<uni-segmented-control :current="current" :values="items" :style-type="styleType"
						:active-color="activeColor" @clickItem="onClickItem" />
				</view>
				<view class="content">
					<view v-if="current === 0" style="display: flex;justify-content: space-between;">
						<input type="text" v-model="inputText" placeholder="说点什么">
						<button class="send-btn" @click="sendMessage">发送</button>
					</view>
					<view v-if="current === 1" style="display: flex;">
						<input type="text" v-model="inputText" placeholder="说点什么">
						<button class="send-btn" @click="sendMessage">发送</button>
					</view>
				</view>

				<scroll-view class="chat-messages" scroll-y="true">
					<view v-for="(msg, index) in commentList" :key="index" class="message-item"
						:class="msg.me ? 'sent' : 'received'">
						<image v-if="msg.me" class="user-avatar1" src="../../static/首页.png" @click="goToUser"></image>
						<image v-if="!msg.me" class="user-avatar" :src="config.baseUrl+msg.avatar"></image>

						<view class="message-container">
							<view v-if="!msg.me" class="sender-name">{{msg.nickName}}</view>
							<view v-if="msg.me" class="sender-name">{{msg.nickName}}</view>
							<view class="message-content" :class="msg.me ? 'sent' : 'received'">
								{{msg.postPlayComment.content}}
							</view>

						</view>

					</view>
				</scroll-view>


			</view>
		</view>

		<view class="bottom">
			<view style="margin-top: -3px;display:flex;">
				<view @click="goChat"><img src="../../static/消息.png" style="width:20px;height:20px;"></view>私聊
			</view>
			<view class="button">
				<view @click="toJoinPlay">我要组队</view>
			</view>
		</view>
		</view>
	</vie>

</template>

<script>
	import {
		playDetail,
		joinPlay
	} from "@/api/play.js";
	import {
		commentList,
		saveComment
	} from "@/api/comment.js";
	import config from '@/config'
	export default {
		data() {

			return {
				detailData: {},
				currentChat: {
					sender: '用户A',
					avatar: '../../static/章若楠.png'
				},
				ownerInfo: {},
				MyChat: {
					sender: '用户B',
					avatar: '../../static/章若楠.png'
				},
				commentList: [],
				messages: [{
						content: '评价一般',
						time: '14:30',
						isMe: false
					},
					{
						content: '有什么问题吗？',
						time: '14:32',
						isMe: true
					}
				],
				inputText: '',
				items: ['搭帖评论', '搭子评价'],
				styles: [{
						value: 'button',
						text: '按钮',
						checked: true
					},
					{
						value: 'text',
						text: '文字'
					}
				],
				// colors: ['#007aff', '#4cd964', '#dd524d'],
				current: 0,
				colorIndex: 0,
				activeColor: '#007aff',
				styleType: 'button'

			};
		},
		created() {

		},
		onLoad(options) {
			// 使用 options 对象接收传递的参数
			const id = options.id;
			const time = decodeURIComponent(options.time);
			const place = decodeURIComponent(options.place);
			const sex = decodeURIComponent(options.sex);
			const more = decodeURIComponent(options.more);
			const number = decodeURIComponent(options.number);
			// 根据这些参数请求详细信息或直接使用
			this.detailData = {
				id,
				time,
				place,
				sex,
				more,
				number
			};
			console.log('接收到的数据:', this.detailData);
			this.getPlayDetail(id);
			this.getCommentListType0();
		},
		watch: {


		},
		mounted() {

		},
		methods: {
			gotoUserInfo() {
				uni.navigateTo({
					url: `/pages/userView/userView?userId=${this.ownerInfo.userId}`,
					success: () => {
						this.selectedPostId = null;
						this.showOptions = false;
					},
					fail: (err) => {
						console.error('跳转至用户页面失败:', err);
					}
				});
			},
			createCommentType0() {
				const comment = {
					content: this.inputText.trim(),
					playId: this.detailData.id,
					type: this.current
				}
				saveComment(comment).then(res => {
					this.getCommentListType0();
				})
			},
			createCommentType1() {
				const comment = {
					content: this.inputText.trim(),
					playId: this.detailData.id,
					type: 1
				}
				saveComment(comment).then(res => {
					this.getCommentListType0();
				})
			},
			getCommentListType0() {
				const data = {
					type: this.current,
					playId: this.detailData.id
				}
				commentList(data).then(res => {
					this.commentList = res.rows;
					console.log(res)
				})
			},
			toJoinPlay() {
				joinPlay({
					playId: this.detailData.id
				}).then(res => {
					console.log("组队成功！！！")
					this.getPlayDetail(this.detailData.id)
				})
			},
			getPlayDetail(id) {
				playDetail(id).then(res => {
					console.log("详情信息:" + res)
					this.ownerInfo = res.data.userInfo;
					this.ownerInfo.avatar = config.baseUrl + this.ownerInfo.avatar
					this.detailData.joinNumber = res.data.postPlay.joinNumber;
				})
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
				this.getCommentListType0();
			},
			sendMessage() {
				if (this.inputText.trim()) {
					this.createCommentType0();
					this.inputText = '';
				}
			},
			goChat() {
				uni.navigateTo({
					url: "/pages/chat/chat"
				})
			},

		}
	};
</script>
<style lang="scss">
	.detail {
		.person {
			width: 390px;
			height: 90px;
			// border-bottom: #a1a1a1 solid 1.5px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			background-color: #fff;

			.img {
				width: 80px;
				height: 80px;
				border-radius: 15px;

				// position: absolute;
				// left: 30px;
				// top: 5px;
				overflow: hidden;
				/* 防止图片超出盒子范围 */
			}

			.img img {
				width: 100%;
				/* 图片宽度占满父容器 */
				height: 100%;
				/* 图片高度占满父容器 */
				object-fit: cover;
				/* 保持图片比例并裁剪多余部分 */
				border-radius: 15px;
				/* 图片圆角与父容器一致 */
			}

			.text {
				width: 200px;
				height: 30px;
				background-color: #ffffff;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
		}

		.top {
			width: 390px;
			height: 250px;
			background-color: #ffffff;
			padding: 30px;


			.main {
				width: 300px;
				height: 200px;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

			}
		}

		.main {
			width: 390px;
			height: 410px;
			background-color: #ffffff;

			.uni-padding-wrap {

				// width: 750rpx;
				padding: 0px 30px;
			}

			.content {
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				justify-content: center;
				align-items: center;
				height: 150px;
				text-align: center;

				input {
					width: 250px;
					height: 30px;
					border: #a1a1a1 solid 1.5px;
					margin-top: -60px;
					text-align: left;
					padding-left: 10px;
					border-radius: 10px;

				}
			}
		}

		.bottom {
			width: 390px;
			height: 70px;
			border-top: #636363 solid 1.5px;
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.button {
				width: 100px;
				height: 40px;
				background-color: #00aaff;
				color: #fff;
				border-radius: 15px;
				text-align: center;
				line-height: 40px;
				margin-left: 80px;
			}
		}
	}

	.chat-messages {
		margin-top: -90px;
		height: 235px;
		overflow: auto !important;
	}

	.message-item {
		width: 360px;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		align-items: flex-start;
	}



	.message-container {
		display: flex;
		// flex-direction: column;
		justify-content: space-between;
		align-items: center;
		width: 300px;

	}

	.sender-name {
		width: 50px;
		font-size: 24rpx;
		color: #666;
		margin-bottom: 5rpx;
	}

	.message-item.received {
		justify-content: flex-start;
	}

	.message-item.sent {
		justify-content: flex-end;
	}

	.message-content {
		width: 360px;

		padding: 30rpx 10rpx;
		border-radius: 10rpx;
		display: inline-block;

	}

	.message-content.received {
		background-color: white;
		color: #333;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.18);
		position: relative;
	}

	.message-content.sent {
		background: linear-gradient(to right, #55aaff, #66bbff);
		color: white;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.message-content.received {
		background-color: white;
		color: #333;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
		position: relative;
	}

	.message-content.sent {
		background: linear-gradient(to right, #55aaff, #66bbff);
		color: white;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.message-time {
		font-size: 24rpx;
		color: #666;
		margin-top: 10rpx;
		text-align: center;
	}

	.user-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin: 0 15rpx;
		border: 2rpx solid rgba(255, 255, 255, 0.8);
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.user-avatar1 {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin: 0 15rpx;
		border: 2rpx solid rgba(255, 255, 255, 0.8);
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.chat-input {
		display: flex;
		padding: 20rpx;
		background-color: white;
		border-top: 1px solid #eee;
		align-items: center;
	}

	.emoji-icon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
	}

	.input-box {
		flex: 1;
		padding: 15rpx;
		border: 1px solid #ddd;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.send-btn {
		width: 60px;
		margin-top: -60px;
		margin-left: 20px;
		background: linear-gradient(to right, #55aaff, #66bbff);
		color: white;
		border-radius: 10rpx;
		padding: 0 20rpx;
		height: 35px;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
		line-height: 35px;
	}
</style>